<template>
  <div id="app">
    <center>
      <h2>信息管理系统</h2>
    </center>
    <el-card>
      <el-button type="primary" plain size="small" icon="el-icon-plus" @click="dialogVisible=true">添加信息</el-button>
      <el-button type="danger" plain size="small" icon="el-icon-delete" @click="delArr">多选删除</el-button>
    </el-card>
    <el-card>
      <el-table :stripe="true" :data="tableData" @selection-change="selectChange">
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="id" label="编号"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="gender" label="性别">
          <template slot-scope="scope">
            <el-tag :type="scope.row.gender?'':'danger'">{{scope.row.gender?'男':'女 '}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="rank" label="等级">
          <template slot-scope="scope">
            {{scope.row.rank}}级
          </template>
        </el-table-column>
        <el-table-column prop="dname" label="部门"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger" @click="del(scope.row.id)" size="small">删除</el-button>
          </template>

        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog
            title="添加信息"
            :visible.sync="dialogVisible"
            width="40%"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            >


      <el-form ref="form" :model="formData" label-width="95px">
        <el-form-item label="姓名" prop="name" :rules="[{required:true,message:'请输入姓名',trigger:['blur','change']}]">
          <el-input v-model="formData.name" placeholder="请输入姓名" ></el-input>
        </el-form-item>

        <el-form-item label="请选择性别" prop="gender" :rules="[{required:true,message:'请选择性别',trigger:['blur','change']}]">
          <el-radio-group v-model="formData.gender">
            <el-radio :label="1" >男</el-radio>
            <el-radio  :label="0" >女</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="年龄" prop="age" :rules="[{required:true,message:'请输入年龄',trigger:['blur','change']}]">
          <el-input v-model="formData.age" placeholder="请输入年龄"></el-input>
        </el-form-item>

        <el-form-item label="等级" prop="rank" :rules="[{required:true,message:'请选择等级',trigger:['blur','change']}]">
          <el-select v-model="formData.rank" placeholder="请选择等级">
            <el-option v-for="item in 5" :value="item" :label="item+'级'"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="部门" prop="department" :rules="[{required:true,message:'请选择部门',trigger:['blur','change']}]">
          <el-select v-model="formData.department" placeholder="请选择部门">
            <el-option v-for="item in depList" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>



      </el-form>



  <span slot="footer" class="dialog-footer">
    <el-button @click="clearForm">取 消</el-button>
    <el-button type="primary" @click="formSubmit('form')">提 交</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'App',
  data:()=>({
    tableData:[],
    depList:[],
    dels:[],
    dialogVisible:false,
    formData:{
      name:'',
      gender:1,
      age:'',
      rank:'',
      department:''
    }
  }),
  created() {
    this.dataInit();
    this.getDep();
  },
  methods:{
    //获取所有信息
    dataInit(){
      this.$http.get("/api/person/getAll").then(res=>{
        this.tableData = res.data.data.data;
      }).catch(error=>{
        console.log(error);
      });
    },
    //获取部门信息
    getDep(){
      this.$http.get("/api/department/getAll").then(res=>{
        this.depList = res.data.data.data;
      }).catch(error=>{
        console.log(error);
      });
    },
    //删除
    del(id){
      this.$http.get("/api/person/del?id="+id).then(res=>{
        if(res.data.code===200){
          this.$message.success("删除成功!");
          this.dataInit();
        }else{
          this.$message.error("删除失败！");
        }
      }).catch(error=>{
        console.log(error);
      });
    },
    //选中状态
    selectChange(val){
      let arr = [];
      val.filter((item)=>{
        arr.push(item.id);
      });
      this.dels = arr;
    },
    //多选删除
    delArr(){
      if(this.dels.length<=0){
        this.$message.error("至少选中一个！");
      }else{
        this.$http.post("/api/person/dels",this.dels).then(res=>{
          if(res.data.code===200){
            this.$message.success("删除成功!");
            this.dataInit();
          }else{
            this.$message.error("删除失败！");
          }
        }).catch(error=>{
          console.log(error);
        });
      }
    },
    //表单提交
    formSubmit(name){
      this.$refs[name].validate((valid)=>{
        if(valid){
          this.$http.post("/api/person/add",this.formData).then(res=>{
            if(res.data.code===200){
              this.$message.success("添加成功!");
              this.dataInit();
            }else{
              this.$message.error("添加失败！");
            }
          }).catch(error=>{
            console.log(error);
          });
          this.clearForm();
        }else{
          this.$message.warning("请完善信息！");
          return false;
        }
      })
    },
    //清空表单
    clearForm(){
      this.$refs['form'].resetFields();
      this.dialogVisible = false
    }


  }
}
</script>

<style>

</style>
